<template>
  <div class="zan-animation-box">
  </div>
</template>

<script>

export default {
  components: {

  },
  props: {
  },
  data() {
    return {
      speed:1,
      time:800,
    }
  },
  watch: {

  },
  created() {
  },
  mounted() {
    this.liveHeart();
    this.watchSpeed();
  },
  methods: {
    watchSpeed(){ //监听 sessionStorage值改变控制canvas动画的模式
      let _this = this;
      window.addEventListener('setItem',() => {
        if(this.speed == 1 && sessionStorage.getItem('speed') == '0'){
          this.reset(0,400);
        }else if( sessionStorage.getItem('hunayuan') == '0'){
          this.reset(1,800);
        }
      })
    },
    reset(speed,time){
      clearInterval(this.stageSetInterval);
      this.speed = speed;
      this.time = time;
      this.liveHeart();
    },
    removeChild(value){ //删除canvas动画元素
      let $myCanvas = document.getElementsByClassName("my-canvas");
      if($myCanvas.length > value){
        var element,
          pElements = $myCanvas;
        while (pElements.length > value) {
          element = pElements[0];
          element.parentElement.removeChild(element);
        }
      }
    },
    // 点赞图标上飘动的小礼物
    liveHeart() {
      // 飘动的小礼物图片地址在此处更换
      let assets = [
        require("../assets/images/zan/gift1.png"),
        require("../assets/images/zan/gift2.png"),
        require("../assets/images/zan/gift3.png"),
        require("../assets/images/zan/gift4.png"),
        require("../assets/images/zan/gift5.png"),
        require("../assets/images/zan/gift6.png"),
      ];
      assets.forEach(function(src, index) {
        assets[index] = new Promise(function(resolve) {
          var img = new Image(); //创建img标签
          img.onload = resolve.bind(null, img); //查看图片加载到什么程度了
          img.src = `${assets[index]}`;
        });
      });
      let _this = this;
      Promise.all(assets).then(function(images) {
        //所有图片加载完成了，开始canvas
        var random = {
          uniform: function(min, max) {
            return min + (max - min) * Math.random();
          },
          uniformDiscrete: function(i, j) {
            return i + Math.floor((j - i + 1) * random.uniform(0, 1));
          }
        };
        // 给容器增加canvas和小礼物
          let stage = new BubbleHearts();
          let canvas = stage.canvas;
          canvas.width = 320;
          canvas.height = 500;
          canvas.style["width"] = "100%";
          canvas.style["height"] = "100%";
          canvas.style["position"] = "absolute";
          canvas.style["bottom"] = "0";
          canvas.style["right"] = "0px";
          canvas.className = "my-canvas";
          document.getElementsByClassName("zan-animation-box")[0].appendChild(canvas);

            _this.stageSetInterval = setInterval(function() {
              //每800ms飘小礼物
              let data = { //传值到构造函数中  img为绘制图片  speed图像移动速度
                img :images[random.uniformDiscrete(0, images.length - 1)],
                speed : _this.speed
              }
              stage.bubble(data); //小礼物随机飘动
            }, _this.time);
            setTimeout(()=>{
              _this.removeChild(1); //在没有离开页面前保留一个canvas动画
            },1000)
          //离开home页面时清除forEach循环内所有定时器： 通过$once来监听定时器，在beforeDestroy钩子中可以被清除。
          _this.$once("hook:beforeDestroy", () => {
            clearInterval(_this.stageSetInterval);
            _this.removeChild(0); //在离开后全部删除canvas动画
          });
      });
    },
  }
};
</script>
<style scoped>
.zan-animation-box{
  height: 200px;
  width: 140px;
  position: absolute;
  right: 0;
  bottom: 90px;
  z-index: 9;
}

</style>
